<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>360电商项目-19</title>
		<!--引入第三方css文件-->
		<link rel="stylesheet" href="css/fullpage.css" />
		<link rel="stylesheet" href="css/index.css"/>
	</head>
	<body>
		<!--导航栏-->
		<div class="header">
			<div class="headerContent">
				<!--左边一个logo-->
				<img src="images/logo.png" alt="" />
				<!--右边一个div放n个链接-->
				<div class="nav">
					<!--装三个div-->
					<a href="#">论坛</a>
					<a href="#">拓展</a>
					<a href="#">京东</a>
					<a href="#">个人简历</a>
				</div>
			</div>
		</div>
		<!--分屏插件-->
		<div id="fullpage">
			<!--第一屏-->
		<div class="section section1">
			<!--文字和链接-->
			<div class="title-box">
				<p>畅快浏览，极致体验</p>
				<a href="#"></a>
			</div>
			
			<!--小球-->
			<img src="./images/ball1.png" alt="" id="ball1"/>
			<!--大球-->
			<img src="images/ball2.png" alt="" id="ball2"/>
			<!--卫星-->
			<img src="images/ship.png" alt="" id="ship" />
		</div>
		
		
		    <!--第二屏-->
		<div class="section">
			<!--背景视频-->
			<video autoplay loop muted>
				<!--<source src="images/video1.mp4" type="video/mp4"></source>-->
				<source src="https://s2.ssl.qhres.com/static/dfeefadde568eab0.mp4" type="video/mp4"></source>
				你的浏览器不支持播放视屏功能，请更换更新的浏览器
			</video>
			
			<!--文字模块-->
			<div class="word-content">
				<div class="bigword">极速</div>
				<!--<hr width="100px"/>-->
				<div class="line"></div>
				<div class="midword">Chromium78全新内核</div>
				<div class="smallword">性能强劲，快如闪电。</div>
				<a href="#"></a>
			</div>
		</div>
		
		<!--第三屏-->
		<div class="section">
			<!--背景视频-->
			<video autoplay loop muted>
				<!--<source src="images/video2.mp4" type="video/mp4"></source>-->
				<source src="https://s3.ssl.qhres.com/static/9bebcedf292f327e.mp4" type="video/mp4"></source>
				你的浏览器不支持播放视屏功能，请更换更新的浏览器
			</video>
			
			<!--文字模块-->
			<div class="word-content">
				<div class="bigword">极酷</div>
				<!--<hr width="100px"/>-->
				<div class="line"></div>
				<div class="midword">暗夜炫黑模式</div>
				<div class="smallword">定义酷，定义你。</div>
				<a href="#"></a>
			</div>
		</div>
		
		<!--第四屏-->
		<div class="section">
		<!--背景视频-->
			<video autoplay loop muted>
				<!--<source src="images/video3.mp4" type="video/mp4"></source>-->
				<source src="https://s1.ssl.qhres.com/static/fdf92889c539303c.mp4" type="video/mp4"></source>
				你的浏览器不支持播放视屏功能，请更换更新的浏览器
			</video>
			
			<!--文字模块-->
			<div class="word-content">
				<div class="bigword">极安全</div>
				<!--<hr width="100px"/>-->
				<div class="line"></div>
				<div class="midword">DNS加密防劫持</div>
				<div class="smallword">安全升级，肆意无忌。</div>
				<a href="#"></a>
			</div>
		</div>
		
		<!--第五屏-->
		<div class="section">
			<!--背景视频-->
			<video autoplay loop muted>
				<!--<source src="images/video4.mp4" type="video/mp4"></source>-->
				<source src="https://s1.ssl.qhres.com/static/7e7f0ec4a0cc7a66.mp4" type="video/mp4"></source>
				你的浏览器不支持播放视屏功能，请更换更新的浏览器
			</video>
			
			<!--文字模块-->
			<div class="word-content">
				<div class="bigword">极视界</div>
				<!--<hr width="100px"/>-->
				<div class="line"></div>
				<div class="midword">4k高清视频播放</div>
				<div class="smallword">还原真实之美，尽显万物本色。</div>
				<a href="#"></a>
			</div>
			<!--底部模块-->
			<div class="footer">
				<br />关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益 | English Site
                <br/><img src="images/icon.png" alt="" />Copyright © 2004-2021  京东JD.com 版权所有
			</div>
		</div>
</div>
		<!--引入第三方js文件，先人后己，本项目中先引入jQuery的，后引入fullpage的，因为fullpage需要用到jQuery的js文件-->
		<script type="text/javascript" src="js/jquery.min.js"></script>
		
		<script type="text/javascript" src="js/fullpage.js"></script>
		
		<script type="text/javascript">
//			游览器加载页面时,调用第三方的fullpage插件
//          $(document).ready(函数);
            $(function(){
            	$('#fullpage').fullpage(
            		{
//          			需要右边的分屏行条
            			'navigation':true,
//          			当第二屏加载时触发执行
                        'afterLoad':function(){
//                      	将第二屏的.word-conten模块以动画的方式显示
//                          this表示fullpage插件
                            $(this).find('.word-content').fadeIn();
                        },
//                      当第二屏离开时触发执行
                        'onLeave':function(){
//                      	将第二屏的.word-conten模块以动画的方式显示
//                          this表示fullpage插件
                        	$(this).find('.word-content').fadeOut();
                        }
            		}
            	)
            })
		</script>
	</body>
</html>
